<template>
  <v-navigation-drawer id="app-drawer" app dark floating width="200" mobile-break-point="991">
    <v-img :src="image" height="100%">
      <v-layout tag="v-list" fill-height column>
        <v-list-tile avatar @click="gotoOverview">
          <v-list-tile-avatar>
            <v-icon>gesture</v-icon>
          </v-list-tile-avatar>
          <v-list-tile-title>{{ $t('login.headerTitle') }}</v-list-tile-title>
        </v-list-tile>
        <v-divider />
        <v-list-tile v-for="(item, i) in menu" :key="i" :to="item.path" avatar class="v-list-item">
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-title v-text="item.name" />
        </v-list-tile>
      </v-layout>
    </v-img>
  </v-navigation-drawer>
</template>
    
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { mapState, mapActions } from "vuex";
import { extendRoutes } from "@/routes/routes";
declare const $Vue: Vue;
@Component({
  methods: {
    ...mapActions(["TOGGLE_DRAWER"])
  },
  filters: {},
  computed: mapState(["drawer"])
})
export default class Drawer extends Vue {
  private image: string = "";

  private menu: Array<any> = [];

  protected mounted() {
    this.menu = this.buildMenu(extendRoutes);
  }

  private buildMenu(routes: Array<any>): Array<any> {
    let menu: Array<any> = [];
    routes.forEach((item: any) => {
      
      if (!item.meta.hidden) {
        menu.push({
          path: item.path,
          icon: item.meta.icon,
          name: item.name
        });
      }
    });

    return menu;
  }

  private gotoOverview() {
    this.$router.push({name: '概览'});
    $Vue.$emit('title', {
      message: '首页'
    })
  }
}
</script>

<style lang="less">
#app-drawer {
  .v-list__tile {
    border-radius: 4px;

    &--buy {
      margin-top: auto;
      margin-bottom: 17px;
    }
  }

  .v-image__image--contain {
    top: 9px;
    height: 60%;
  }

  .search-input {
    margin-bottom: 30px !important;
    padding-left: 15px;
    padding-right: 15px;
  }
}
</style>
